
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--
body, ul, li {margin: 0; padding: 0; font-size: 14px;}
body {padding: 30px; background-color: #ccc;}
ul {margin: 5px 0 10px 0;}
ul li {list-style: none; display: block;}
li.classname { font-weight: bold; }
.csscode, pre {padding: 10px; border: 1px solid #999; display: block; background-color: #fff; width: 100%; font-size: 12px; line-height: 200%;}
li.classmark { font-size: 12px; margin: 5px; line-height: 160%; display: none;}

/*
一下代码由程序自动生成。
*/
.pic {background-image: url("CSS Satyr.png"); display: block;}
.pic_21 {background-position: -265px -260px; width: 50px; height: 50px; }
.pic_19 {background-position: -285px -100px; width: 54px; height: 64px; }
.pic_20 {background-position: -265px -180px; width: 64px; height: 52px; }
.pic_12 {background-position: -145px -220px; width: 90px; height: 90px; }
.pic_18 {background-position: -270px -0px; width: 64px; height: 64px; }
.pic_17 {background-position: -220px -0px; width: 20px; height: 22px; }
.pic_16 {background-position: -165px -0px; width: 37px; height: 34px; }
.pic_8 {background-position: -190px -55px; width: 50px; height: 50px; }
.pic_16 {background-position: -75px -265px; width: 50px; height: 50px; }
.pic_15 {background-position: -0px -265px; width: 50px; height: 50px; }
.pic_14 {background-position: -75px -190px; width: 50px; height: 50px; }
.pic_13 {background-position: -0px -190px; width: 50px; height: 50px; }
.pic_11 {background-position: -150px -115px; width: 90px; height: 90px; }
.pic_9 {background-position: -0px -120px; width: 50px; height: 50px; }
.pic_10 {background-position: -75px -120px; width: 50px; height: 50px; }
.pic_7 {background-position: -120px -60px; width: 50px; height: 50px; }
.pic_6 {background-position: -60px -60px; width: 32px; height: 32px; }
.pic_3 {background-position: -105px -0px; width: 35px; height: 42px; }
.pic_5 {background-position: -0px -60px; width: 32px; height: 32px; }
.pic_2 {background-position: -0px -0px; width: 28px; height: 42px; }
.pic_2 {background-position: -45px -0px; width: 37px; height: 42px; }
//-->
</style>
<title>CSS Satyr - http://shen.li/</title>
</head>
<body>
<h2>CSS Satyr</h2>
<ul>
<li>版本：1.2.0.0</li>
<li>作者：shen.li</li>
<li>主页：<a href="http://shen.li/blog/post/C_sharp/CSS_Satyr.html" target="_blank">http://shen.li/blog/post/C_sharp/CSS_Satyr.html</a></li>
<li>图片：<a href="CSS Satyr.png">C:\Users\Administrator\Desktop\scsj\scsj_h5\static\images\CSS Satyr.png</a></li>
</ul>

<h2>CSS 代码</h2>
<pre>
.shen_li {background-image: url("CSS Satyr.png"); display: block;}
.pic_21 {background-position: -265px -260px; width: 50px; height: 50px; }
.pic_19 {background-position: -285px -100px; width: 54px; height: 64px; }
.pic_20 {background-position: -265px -180px; width: 64px; height: 52px; }
.pic_12 {background-position: -145px -220px; width: 90px; height: 90px; }
.pic_18 {background-position: -270px -0px; width: 64px; height: 64px; }
.pic_17 {background-position: -220px -0px; width: 20px; height: 22px; }
.pic_16 {background-position: -165px -0px; width: 37px; height: 34px; }
.pic_8 {background-position: -190px -55px; width: 50px; height: 50px; }
.pic_16 {background-position: -75px -265px; width: 50px; height: 50px; }
.pic_15 {background-position: -0px -265px; width: 50px; height: 50px; }
.pic_14 {background-position: -75px -190px; width: 50px; height: 50px; }
.pic_13 {background-position: -0px -190px; width: 50px; height: 50px; }
.pic_11 {background-position: -150px -115px; width: 90px; height: 90px; }
.pic_9 {background-position: -0px -120px; width: 50px; height: 50px; }
.pic_10 {background-position: -75px -120px; width: 50px; height: 50px; }
.pic_7 {background-position: -120px -60px; width: 50px; height: 50px; }
.pic_6 {background-position: -60px -60px; width: 32px; height: 32px; }
.pic_3 {background-position: -105px -0px; width: 35px; height: 42px; }
.pic_5 {background-position: -0px -60px; width: 32px; height: 32px; }
.pic_2 {background-position: -0px -0px; width: 28px; height: 42px; }
.pic_2 {background-position: -45px -0px; width: 37px; height: 42px; }
</pre>

<h2>调用效果</h2>

<ul><li class="classname">delete.png</li><li><div class="csscode">&nbsp;&lt;span class="pic pic_21"&gt; ... &lt;/span&gt;</div></li><li class="classmark">delete.png</li><li class="pic pic_21"></li></ul>
<ul><li class="classname">link_qq.png</li><li><div class="csscode">&nbsp;&lt;span class="pic pic_19"&gt; ... &lt;/span&gt;</div></li><li class="classmark">link_qq.png</li><li class="pic pic_19"></li></ul>
<ul><li class="classname">link_wx.png</li><li><div class="csscode">&nbsp;&lt;span class="pic pic_20"&gt; ... &lt;/span&gt;</div></li><li class="classmark">link_wx.png</li><li class="pic pic_20"></li></ul>
<ul><li class="classname">map_on.png</li><li><div class="csscode">&nbsp;&lt;span class="pic pic_12"&gt; ... &lt;/span&gt;</div></li><li class="classmark">map_on.png</li><li class="pic pic_12"></li></ul>
<ul><li class="classname">back.png</li><li><div class="csscode">&nbsp;&lt;span class="pic pic_18"&gt; ... &lt;/span&gt;</div></li><li class="classmark">back.png</li><li class="pic pic_18"></li></ul>
<ul><li class="classname">shopWallet.png</li><li><div class="csscode">&nbsp;&lt;span class="pic pic_17"&gt; ... &lt;/span&gt;</div></li><li class="classmark">shopWallet.png</li><li class="pic pic_17"></li></ul>
<ul><li class="classname">invite.png</li><li><div class="csscode">&nbsp;&lt;span class="pic pic_16"&gt; ... &lt;/span&gt;</div></li><li class="classmark">invite.png</li><li class="pic pic_16"></li></ul>
<ul><li class="classname">home_on.png</li><li><div class="csscode">&nbsp;&lt;span class="pic pic_8"&gt; ... &lt;/span&gt;</div></li><li class="classmark">home_on.png</li><li class="pic pic_8"></li></ul>
<ul><li class="classname">mine_on.png</li><li><div class="csscode">&nbsp;&lt;span class="pic pic_16"&gt; ... &lt;/span&gt;</div></li><li class="classmark">mine_on.png</li><li class="pic pic_16"></li></ul>
<ul><li class="classname">mine.png</li><li><div class="csscode">&nbsp;&lt;span class="pic pic_15"&gt; ... &lt;/span&gt;</div></li><li class="classmark">mine.png</li><li class="pic pic_15"></li></ul>
<ul><li class="classname">class_on.png</li><li><div class="csscode">&nbsp;&lt;span class="pic pic_14"&gt; ... &lt;/span&gt;</div></li><li class="classmark">class_on.png</li><li class="pic pic_14"></li></ul>
<ul><li class="classname">class.png</li><li><div class="csscode">&nbsp;&lt;span class="pic pic_13"&gt; ... &lt;/span&gt;</div></li><li class="classmark">class.png</li><li class="pic pic_13"></li></ul>
<ul><li class="classname">map.png</li><li><div class="csscode">&nbsp;&lt;span class="pic pic_11"&gt; ... &lt;/span&gt;</div></li><li class="classmark">map.png</li><li class="pic pic_11"></li></ul>
<ul><li class="classname">shopCart.png</li><li><div class="csscode">&nbsp;&lt;span class="pic pic_9"&gt; ... &lt;/span&gt;</div></li><li class="classmark">shopCart.png</li><li class="pic pic_9"></li></ul>
<ul><li class="classname">shopCart_on.png</li><li><div class="csscode">&nbsp;&lt;span class="pic pic_10"&gt; ... &lt;/span&gt;</div></li><li class="classmark">shopCart_on.png</li><li class="pic pic_10"></li></ul>
<ul><li class="classname">home.png</li><li><div class="csscode">&nbsp;&lt;span class="pic pic_7"&gt; ... &lt;/span&gt;</div></li><li class="classmark">home.png</li><li class="pic pic_7"></li></ul>
<ul><li class="classname">unChecked.png</li><li><div class="csscode">&nbsp;&lt;span class="pic pic_6"&gt; ... &lt;/span&gt;</div></li><li class="classmark">unChecked.png</li><li class="pic pic_6"></li></ul>
<ul><li class="classname">captaha.png</li><li><div class="csscode">&nbsp;&lt;span class="pic pic_3"&gt; ... &lt;/span&gt;</div></li><li class="classmark">captaha.png</li><li class="pic pic_3"></li></ul>
<ul><li class="classname">checked.png</li><li><div class="csscode">&nbsp;&lt;span class="pic pic_5"&gt; ... &lt;/span&gt;</div></li><li class="classmark">checked.png</li><li class="pic pic_5"></li></ul>
<ul><li class="classname">tele.png</li><li><div class="csscode">&nbsp;&lt;span class="pic pic_2"&gt; ... &lt;/span&gt;</div></li><li class="classmark">tele.png</li><li class="pic pic_2"></li></ul>
<ul><li class="classname">pw.png</li><li><div class="csscode">&nbsp;&lt;span class="pic pic_2"&gt; ... &lt;/span&gt;</div></li><li class="classmark">pw.png</li><li class="pic pic_2"></li></ul>
</body>
</html>
				